<template>
  <div>
    <Back :title="$t('FoundImage_buildImage')" class="bt"></Back>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="Huilder" name="Huilder">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="Names" prop="isSynchronize">
            <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort"> {{$t('FoundImage_add')}}</el-button>
          </el-form-item>
          <el-form-item prop="Names" v-for="(item, index) in portNum" :key="item">
            <el-input placeholder=" $t('FoundImage_plsInputName')" v-model="ruleForm.Names[index]" style="width: 40%;">
              <template slot="prepend">name</template>
            </el-input>
            <el-button @click="delPort(item, index)" :title=" $t('FoundImage_delete')" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
          </el-form-item>
          <el-form-item label="Web editor" prop="desc">
            <el-input type="textarea" :placeholder="$t('FoundImage_pasteOrDefineDockerFile')" v-model="ruleForm.desc" :rows="12"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" style="background: #067FB5; color: #fff;" @click="onSubmit" disabled :title=" $t('FoundImage_functionImproving')"> {{$t('FoundImage_createNow')}}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="Output" name="Output" :disabled="isShow === 0 ? true : false">
        {{ text }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Input, Button, TabPane, Tabs } from 'element-ui'
import Back from '@/components/Back'
// import http from '@/utils/http'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Tabs)
Vue.use(TabPane)
export default {
  data () {
    return {
      activeName: 'Huilder',
      isShow: 0,
      text: '',
      ruleForm: {
        Names: [''],
        desc: ''
      },
      portNum: [0],
      i: 1
    }
  },
  methods: {
    onSubmit () {
      // let blob = new Blob(['Hello World!'], {
      //   type: 'text/plain'
      // })
      // console.info(blob)
      // console.dir(this.ruleForm)
      // const names = this.ruleForm.Names.join('&t=')
      // console.log(this.$refs.inputfile.files[0])
      // const docker = `curl --unix-socket /var/run/docker.sock -s -H "Content-Type:application/tar" --data-binary '${JSON.stringify(this.$refs.inputfile.files[0])}' -X POST http:/v1.40/build?t=ww:last`
      // const docker = `curl --unix-socket /var/run/docker.sock -s  -H "Content-Type:application/json" -d '${blob}' -X POST "http:/v1.40/build?t=${names}"` // 建立镜像
      // const docker = `curl --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/build?t=${names}&remote=${this.ruleForm.desc}"` // 建立镜像
      // const docker = `curl --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/build?t=${names}&dockerfile=${this.ruleForm.desc}"` // 建立镜像
      // post({ docker, dockerfile: blob }, res => {
      //   // console.log(res)
      //   this.isShow = 1
      //   this.activeName = 'Output'
      // })
    },
    // 添加names的input框
    addPort () {
      this.portNum.push(this.i)
      this.ruleForm.Names.push('')
      this.i++
    },
    // 删除names的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.ruleForm.Names.splice(index, 1)
    }
  },
  components: {
    Back
  }
}
</script>

<style lang="scss" scoped>
.bt{
  margin-bottom: 30px;
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
</style>
